<template>
  <el-select
    v-model="dataForm.wareId"
    filterable
    remote
    reserve-keyword
    placeholder="请输入关键词"
    :remote-method="getWareList"
    :loading="loading">
    <el-option
      v-for="item in wareList"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
</template>

<script>
import wareInfoApi from '../../../../api/ware/wareInfoApi'

export default {
  props:['wareId'],
  name: 'selectWareByNameComponent',
  data(){
    return{
      wareList:[],
      dataForm:{
        wareId:null,
      },
      warePage:{
        currentIndex:1,
        size:10
      },
      loading:false
    }
  },
  methods: {
    async getWareList (wareName) {
      // console.log('用户输入的仓库名称是', wareName)
      this.loading = true;
      let p = await wareInfoApi.getWareList(this.warePage.currentIndex, this.warePage.size, wareName)
      this.wareList = p.data.page.list
      this.loading = false;
    }
  },
  created () {
    this.getWareList();
  },
  watch:{
    "dataForm.wareId"(val){
      this.$emit('update-ware-id',val)
    },
    wareId(val){
      this.dataForm.wareId = val;
    }
  }

}
</script>

<style scoped>

</style>
